<template>
  <view>
    <MySearch @click="toSearch"></MySearch>
    <view class="cate-page">
      <scroll-view :scroll-y="true" :style="{ height: wh + 'px' }" class="cate">
        <view v-for="(item, index) in cateList" :key="index" class="cate-item" :class="{ active: index === activeIndex }" @click="handleClick(index)">{{ item.cat_name }}</view>
      </scroll-view>
      <scroll-view scroll-y="true" :style="{ height: wh + 'px' }" class="level2" :scroll-top="scrollTop">
        <view class="level2-item" v-for="(item, index) in cateLevel2" :key="index">
          <view class="level2-title">/ {{ item.cat_name }} /</view>
          <view class="level2-content">
            <view class="level3" v-for="(itm, idx) in item.children" :key="idx" @click="toGoodsList(itm)">
              <image :src="itm.cat_icon" mode="aspectFill"></image>
              <text>{{ itm.cat_name }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        cateList: [],
        cateLevel2: [],
        wh: 0,
        activeIndex: 0,
        scrollTop: 0
      };
    },
    computed: {
      info() {
        return this.$store.getters.info
      }
    },
    methods: {
      async getCateList() {
        const result = await uni.$http.get('/api/public/v1/categories')
        if(result.statusCode !== 200) {
          uni.$showMessage()
        }
        else {
          this.cateList = result.data.message
          this.cateLevel2 = this.cateList[0].children
        }
      },
      handleClick(index) {
        this.activeIndex = index
        this.scrollTop = this.scrollTop === 0 ? 1 : 0
        this.cateLevel2 = this.cateList[this.activeIndex].children
      },
      toGoodsList(itm) {
        uni.navigateTo({
          url: `/subpkg/GoodsList/GoodsList?cid=${itm.cat_id}`
        })
      },
      toSearch() {
        uni.navigateTo({
          url: '/subpkg/Search/Search'
        })
      }
    },
    onLoad() {
      const sysInfo = uni.getSystemInfoSync()
      this.wh = sysInfo.windowHeight - 50
      this.getCateList()
    },
    onShow() {
      uni.setTabBarBadge({
        index: 2,
        text: `${this.info}`
      })
    }
  }
</script>

<style lang="scss" scoped>
.cate-page {
  display: flex;
  .cate {
    width: 25%;
    font-size: 26rpx;
    .cate-item {
      height: 120rpx;
      text-align: center;
      line-height: 120rpx;
      &.active {
        position: relative;
        background-color: white;
        &::before {
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
          content: '';
          width: 8rpx;
          height: 60rpx;
          background-color: #c00000;
        }
      }
    }
  }
  .level2 {
    background-color: white;
    .level2-item {
      .level2-title {
        padding: 30rpx 0;
        font-size: 26rpx;
        font-weight: bold;
        text-align: center;
      }
      .level2-content {
        display: flex;
        flex-wrap: wrap;
        font-size: 26rpx;
        .level3 {
          display: flex;
          flex-direction: column;
          width: 33%;
          
          image {
            width: 100%;
            height: 200rpx;
          }
          
          text {
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
